<template>
  <div class="real-time-monitoring">
    <h3>实时防护监控</h3>
    <el-card shadow="hover">
      <div class="monitor-data">
        <p><strong>当前攻击次数:</strong> {{ attackCount }}</p>
        <p><strong>最近一次攻击时间:</strong> {{ lastAttackTime }}</p>
        <p><strong>受保护站点数量:</strong> {{ protectedSitesCount }}</p>
      </div>
    </el-card>
    <el-table :data="recentAttacks" style="width: 100%" max-height="400">
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="ip" label="IP地址"></el-table-column>
      <el-table-column prop="type" label="攻击类型"></el-table-column>
      <el-table-column prop="status" label="处理结果"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    siteId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      attackCount: 15,
      lastAttackTime: '2025-02-27 14:30:00',
      protectedSitesCount: 2,
      recentAttacks: [
        { id: 1, time: '2025-02-27 14:30:00', ip: '192.168.1.1', type: 'SQL注入', status: '已阻止' },
        { id: 2, time: '2025-02-27 13:45:00', ip: '192.168.1.2', type: 'XSS攻击', status: '已阻止' }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.real-time-monitoring {
  padding: 20px;

  .monitor-data {
    margin-bottom: 20px;
  }
}
</style>
